<template>
	<view>
		<input v-if="type==undefined" :class="mStyle" :placeholder="hint" v-model="inputContent"
			@focus="onFocus()" @blur="normal()"
			@input="onInput()" :maxlength="max"
			:password="isPass"
		/>
		<input v-else :class="mStyle" :placeholder="hint" v-model="inputContent"
			@focus="onFocus()" @blur="normal()"
			@input="onInput()" :maxlength="max"
			:type="type"
		/>
	</view>
</template>

<script>
	export default {
		props:{
			hint:{
				type:String
			},
			max:{
				type:String
			},
			type:{
				type:String,
			},
			isPass:{
				type:Boolean,
				value:false
			}
		},
		data() {
			return {
				mStyle:"norStyle",
				inputContent:"",
			};
		},
		methods:{
			normal(){
				this.mStyle = "norStyle"
				this.$emit('getInput',this.inputContent)
			},
			onFocus(){
				//console.log("这个输入框的type是"+this.type)
				this.mStyle = "onFocusStyle"
			},
			onInput(){
				this.$emit('getInput',this.inputContent)
			}
		}
	}
</script>

<style>
	.norStyle{
		background-color: #e8e8e8;
		width: 300px;
		height: 40px;
		border: #ffffff 3px solid;
		border-radius: 5px;
	}
	.onFocusStyle{
		background-color: #e8e8e8;
		width: 300px;
		height: 40px;
		border: #00aaff 3px solid;
		border-radius: 5px;
	}
</style>
